<template>
  <div class="statistics-container">
    <el-card shadow="hover" class="box-card">
      <div>用户数量：{{ userCount }}</div>
    </el-card>
    <el-card shadow="hover" class="box-card">
      <div>菜单数量：{{ menuCount }}</div>
    </el-card>
    <el-card shadow="hover" class="box-card">
      <div>登录次数：{{ loginCount }}</div>
    </el-card>
  </div>
</template>

<script>
import { GetUserCount, GetMenuCount, GetLoginCount } from "../api/Statistics";
import { Card } from "element-ui";
export default {
  data() {
    return {
      userCount: 0,
      menuCount: 0,
      loginCount: 0,
    };
  },
  components: {
    [Card.name]: Card,
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      GetUserCount().then((result) => {
        this.userCount = result.data;
      });
      GetMenuCount().then((result) => {
        this.menuCount = result.data;
      });
      GetLoginCount().then((result) => {
        this.loginCount = result.data;
      });
    },
  },
};
</script>

<style>
.box-card {
  width: 300px;
  height: 12vh;
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center; /* 水平居中 */
  background-image: linear-gradient(
    141deg,
    #9fb8ad 0%,
    #1fc8db 51%,
    #2cb5e8 75%
  );
}
.statistics-container {
  padding: 20px;
  display: flex;
}
</style>
